<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--- 准备标签 -->
    <div class="box">hello</div>
    <div class="box">world</div>
    <div class="box">前端</div>
    <div class="box">跟任老师学前端</div>
    <p>使用dom操作元素</p>
    <p class="box">这是有类名的p标签</p>
    <div id="box">
        <h1>这是div中的一级标题</h1>
    </div> 


</body>
<script>
    //获取页面元素：querSelector()和querSelectorAll()
    //做认识：getElementById()、getElementsByTagName()、getElementsByName、getElementsByClassName()
    //let const
    //querSelector('选择器名字')只会获取第一个元素：选择器可以是标签选择器、类选择器、（.类名）和id选择器（#ID名）
   const elm1 = document.querySelector('div');  //通过标签选择
   console.log(elm1);
   const elm2 = document.querySelector('.box1');  //通过类选择器拿到元素
   console.log(elm2);
   const elm3 = document.querySelector('#box h1');   //复合选择器
   console.log(elm3);
   console.log('--------------');
   const em1 = document.querySelectorAll('div');
   console.log(em1);   //伪数组
   for(let i=0;i<em1.length;i++){
    console.log(em1[i]);
   }   
   em1[2].style.color = 'red';
  
   
</script>
</html>